/*
 * @Description: 位置列表单个组件
 * @Author: buwei.huang
 * @Date: 2019-07-30 10:55:08
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-30 16:23:00
 */
<template>
  <div
    class="SearchSiteItem_wrap flex-h flex-vc"
    @click="goPage"
  >
    <i class="icon iconfont icon-place fontsize40" />
    <div class="SearchSiteItem_info">
      <p v-html="ruleTitle"></p>
      <p>{{item.address}}</p>
    </div>
  </div>
</template>

<script>
// import eventBus from '../../../../events/eventBus'
export default {
  props: {
    item: {
      type: Object,
      default: null
    },
    getSearchText: {
      type: String,
      default: null
    },
    routeType: {
      type: String,
      default: null
    }
  },
  computed: {
    // 关键字高亮
    ruleTitle() {
      let nameStr = this.item.name
      if (!nameStr) {
        return ''
      }
      if (this.getSearchText && this.getSearchText.length > 0) {
        // 匹配关键字正则
        let replaceReg = new RegExp(this.getSearchText, 'g')
        // 高亮替换v-html值
        let replaceString = '<span class="baseColorNoAcitve">' + this.getSearchText + '</span>'
        // 开始替换
        nameStr = nameStr.replace(replaceReg, replaceString)
      }
      return nameStr
    }
  },
  methods: {
    goPage() {
      let data = {
        NAME: this.item.name,
        LONGITUDE: this.item.location.lng,
        LATITUDE: this.item.location.lat
      }
      this.$EventBus.$emit('siteName', data)
      this.$router.go(-1)
    }
  }
}
</script>
<style>
.SearchSiteItem_wrap {
  height: 144px;
  padding: 0 40px;
}
.SearchSiteItem_wrap .icon {
  color: #999999;
  margin-right: 72px;
}
.SearchSiteItem_info > p:nth-of-type(1) {
  font-size: 16px; /*no*/
  line-height: 48px;
  color: rgba(0, 0, 0, 0.87);
}
.SearchSiteItem_info > p:nth-of-type(2) {
  font-size: 14px; /*no*/
  line-height: 40px;
  color: rgba(0, 0, 0, 0.54);
}
.SearchSiteItem_info > p {
  width: 560px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
